WebCodecs VideoFrame Plane: Hĺbkový pohľad na prístup k dátam video snímky

WebCodecs predstavuje zmenu paradigmy v spracovaní médií na webe. Poskytuje nízkoúrovňový prístup k základným stavebným prvkom médií, čo umožňuje vývojárom vytvárať sofistikované aplikácie priamo v prehliadači. Jednou z najvýkonnejších funkcií WebCodecs je objekt VideoFrame a v rámci neho roviny VideoFrame, ktoré odhaľujú surové pixelové dáta video snímok. Tento článok poskytuje komplexného sprievodcu porozumením a využívaním rovín VideoFrame pre pokročilú manipuláciu s videom.

Pochopenie objektu VideoFrame

Predtým, ako sa ponoríme do rovín, zhrňme si samotný objekt VideoFrame. VideoFrame predstavuje jednu snímku videa. Zapuzdruje dekódované (alebo kódované) video dáta spolu s pridruženými metadátami, ako sú časová značka, trvanie a informácie o formáte. API VideoFrame ponúka metódy na:

• Čítanie pixelových dát: Tu prichádzajú na rad roviny.
• Kopírovanie snímok: Vytváranie nových objektov VideoFrame z existujúcich.
• Zatváranie snímok: Uvoľnenie základných zdrojov, ktoré snímka drží.

Objekt VideoFrame sa vytvára počas procesu dekódovania, zvyčajne pomocou VideoDecoder, alebo manuálne pri vytváraní vlastnej snímky.

Čo sú roviny VideoFrame?

Pixelové dáta VideoFrame sú často organizované do viacerých rovín, najmä vo formátoch ako YUV. Každá rovina predstavuje inú zložku obrazu. Napríklad vo formáte YUV420 existujú tri roviny:

• Y (Luma): Predstavuje jas (luminanciu) obrazu. Táto rovina obsahuje informácie v odtieňoch sivej.
• U (Cb): Predstavuje modrú zložku rozdielu farbonosnosti (chroma).
• V (Cr): Predstavuje červenú zložku rozdielu farbonosnosti (chroma).

Formáty RGB, hoci sa zdajú byť jednoduchšie, môžu v niektorých prípadoch tiež používať viacero rovín. Počet rovín a ich význam závisí výlučne od VideoPixelFormat daného VideoFrame.

Výhodou používania rovín je, že umožňuje efektívny prístup a manipuláciu so špecifickými farebnými zložkami. Napríklad, možno budete chcieť upraviť iba jas (rovina Y) bez ovplyvnenia farby (roviny U a V).

Prístup k rovinám VideoFrame: API

API VideoFrame poskytuje nasledujúce metódy na prístup k dátam rovín:

• copyTo(destination, options): Kopíruje obsah VideoFrame do cieľa, ktorým môže byť iný VideoFrame, CanvasImageBitmap alebo ArrayBufferView. Objekt options riadi, ktoré roviny sa kopírujú a ako. Toto je primárny mechanizmus pre prístup k rovinám.

Objekt options v metóde copyTo vám umožňuje špecifikovať rozloženie a cieľ pre dáta video snímky. Kľúčové vlastnosti zahŕňajú:

• format: Požadovaný formát pixelov kopírovaných dát. Môže byť rovnaký ako pôvodný VideoFrame alebo iný formát (napr. konverzia z YUV na RGB).
• codedWidth a codedHeight: Šírka a výška video snímky v pixeloch.
• layout: Pole objektov popisujúcich rozloženie každej roviny v pamäti. Každý objekt v poli špecifikuje:
• offset: Posun v bajtoch od začiatku dátového buffera po začiatok dát roviny.
• stride: Počet bajtov medzi začiatkom každého riadku v rovine. Toto je kľúčové pre spracovanie výplne (padding).

Pozrime sa na príklad kopírovania VideoFrame vo formáte YUV420 do surového buffera:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 has 3 planes: Y, U, and V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Important to release resources
}

Vysvetlenie:

• Vypočítame veľkosť každej roviny na základe width a height. Y má plné rozlíšenie, zatiaľ čo U a V sú podvzorkované (4:2:0).
• Pole layout definuje rozloženie v pamäti. offset špecifikuje, kde každá rovina začína v bufferi, a stride špecifikuje počet bajtov na preskočenie na ďalší riadok v danej rovine.
• Možnosť format je nastavená na 'I420', čo je bežný formát YUV420.
• Kriticky dôležité je, že po skopírovaní sa volá videoFrame.close() na uvoľnenie zdrojov.

Formáty pixelov: Svet možností

Porozumenie formátom pixelov je nevyhnutné pre prácu s rovinami VideoFrame. VideoPixelFormat definuje, ako sú farebné informácie kódované v rámci video snímky. Tu sú niektoré bežné formáty pixelov, s ktorými sa môžete stretnúť:

• I420 (YUV420p): Planárny formát YUV, kde sú zložky Y, U a V uložené v samostatných rovinách. U a V sú podvzorkované faktorom 2 v horizontálnom aj vertikálnom smere. Je to veľmi bežný a efektívny formát.
• NV12 (YUV420sp): Semi-planárny formát YUV, kde je Y uložené v jednej rovine a zložky U a V sú prekladané v druhej rovine.
• RGBA: Červená, zelená, modrá a alfa zložka sú uložené v jednej rovine, zvyčajne s 8 bitmi na zložku (32 bitov na pixel). Poradie zložiek sa môže líšiť (napr. BGRA).
• RGB565: Červená, zelená a modrá zložka sú uložené v jednej rovine s 5 bitmi pre červenú, 6 bitmi pre zelenú a 5 bitmi pre modrú (16 bitov na pixel).
• GRAYSCALE: Reprezentuje obrazy v odtieňoch sivej s jednou hodnotou jasu (luma) pre každý pixel.

Vlastnosť VideoFrame.format vám povie formát pixelov danej snímky. Nezabudnite skontrolovať túto vlastnosť pred pokusom o prístup k rovinám. Úplný zoznam podporovaných formátov nájdete v špecifikácii WebCodecs.

Praktické prípady použitia

Prístup k rovinám VideoFrame otvára širokú škálu možností pre pokročilé spracovanie videa v prehliadači. Tu je niekoľko príkladov:

1. Video efekty v reálnom čase

Môžete aplikovať video efekty v reálnom čase manipuláciou s pixelovými dátami v VideoFrame. Napríklad, mohli by ste implementovať filter odtieňov sivej spriemerovaním zložiek R, G a B každého pixelu v RGBA snímke a následným nastavením všetkých troch zložiek na túto priemernú hodnotu. Tiež by ste mohli vytvoriť sépiový efekt alebo upraviť jas a kontrast.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. Aplikácie počítačového videnia

Roviny VideoFrame poskytujú priamy prístup k pixelovým dátam potrebným pre úlohy počítačového videnia. Tieto dáta môžete použiť na implementáciu algoritmov pre detekciu objektov, rozpoznávanie tvárí, sledovanie pohybu a ďalšie. Môžete využiť WebAssembly pre výkonnostne kritické časti vášho kódu.

Napríklad, mohli by ste konvertovať farebnú VideoFrame na odtiene sivej a potom aplikovať algoritmus detekcie hrán (napr. Sobelov operátor) na identifikáciu hrán v obraze. Toto by mohlo byť použité ako krok pred-spracovania pre rozpoznávanie objektov.

3. Strih a kompozícia videa

Môžete použiť roviny VideoFrame na implementáciu funkcií strihu videa, ako sú orezávanie, zmena mierky, rotácia a kompozícia. Priamou manipuláciou s pixelovými dátami môžete vytvárať vlastné prechody a efekty.

Napríklad, mohli by ste orezať VideoFrame skopírovaním iba časti pixelových dát do nového VideoFrame. Museli by ste príslušne upraviť posuny (offsets) a kroky (strides) v layout.

4. Vlastné kodeky a prekódovanie

Hoci WebCodecs poskytuje vstavanú podporu pre bežné kodeky ako AV1, VP9 a H.264, môžete ho tiež použiť na implementáciu vlastných kodekov alebo prekódovacích potrubí. Museli by ste sa sami postarať o proces kódovania a dekódovania, ale roviny VideoFrame vám umožňujú prístup a manipuláciu so surovými pixelovými dátami. To by mohlo byť užitočné pre špecializované video formáty alebo špecifické požiadavky na kódovanie.

5. Pokročilá analytika

Prístupom k základným pixelovým dátam môžete vykonávať hĺbkovú analýzu video obsahu. To zahŕňa úlohy ako meranie priemerného jasu scény, identifikáciu dominantných farieb alebo detekciu zmien v obsahu scény. To môže umožniť pokročilé aplikácie video analytiky pre bezpečnosť, dohľad alebo analýzu obsahu.

Práca s Canvas a WebGL

Hoci môžete priamo manipulovať s pixelovými dátami v rovinách VideoFrame, často potrebujete výsledok vykresliť na obrazovku. Rozhranie CanvasImageBitmap poskytuje most medzi VideoFrame a elementom <canvas>. Môžete vytvoriť CanvasImageBitmap z VideoFrame a potom ho nakresliť na plátno pomocou metódy drawImage().

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

Pre pokročilejšie vykresľovanie môžete použiť WebGL. Pixelové dáta z rovín VideoFrame môžete nahrať do WebGL textúr a potom použiť shadery na aplikáciu efektov a transformácií. To vám umožní využiť GPU pre vysokovýkonné spracovanie videa.

Úvahy o výkone

Práca so surovými pixelovými dátami môže byť výpočtovo náročná, preto je kľúčové zvážiť optimalizáciu výkonu. Tu je niekoľko tipov:

• Minimalizujte kópie: Vyhnite sa zbytočnému kopírovaniu pixelových dát. Snažte sa vykonávať operácie priamo na mieste, kedykoľvek je to možné.
• Používajte WebAssembly: Pre výkonnostne kritické časti vášho kódu zvážte použitie WebAssembly. WebAssembly môže poskytnúť takmer natívny výkon pre výpočtovo náročné úlohy.
• Optimalizujte rozloženie pamäte: Zvoľte správny formát pixelov a rozloženie pamäte pre vašu aplikáciu. Zvážte použitie balených formátov (napr. RGBA), ak nepotrebujete často pristupovať k jednotlivým farebným zložkám.
• Používajte OffscreenCanvas: Pre spracovanie na pozadí použite OffscreenCanvas, aby ste neblokovali hlavné vlákno.
• Profilujte svoj kód: Použite nástroje pre vývojárov v prehliadači na profilovanie vášho kódu a identifikáciu výkonnostných prekážok.

Kompatibilita prehliadačov

WebCodecs a API VideoFrame sú podporované vo väčšine moderných prehliadačov, vrátane Chrome, Firefox a Safari. Úroveň podpory sa však môže líšiť v závislosti od verzie prehliadača a operačného systému. Skontrolujte najnovšie tabuľky kompatibility prehliadačov na stránkach ako MDN Web Docs, aby ste sa uistili, že funkcie, ktoré používate, sú podporované vo vašich cieľových prehliadačoch. Pre kompatibilitu medzi prehliadačmi sa odporúča detekcia funkcií.

Bežné nástrahy a riešenie problémov

Tu sú niektoré bežné nástrahy, ktorým sa treba vyhnúť pri práci s rovinami VideoFrame:

• Nesprávne rozloženie: Uistite sa, že pole layout presne popisuje rozloženie pixelových dát v pamäti. Nesprávne posuny alebo kroky môžu viesť k poškodeným obrázkom.
• Nezhodné formáty pixelov: Uistite sa, že formát pixelov, ktorý špecifikujete v metóde copyTo, zodpovedá skutočnému formátu VideoFrame.
• Úniky pamäte: Vždy zatvorte objekty VideoFrame a CanvasImageBitmap, keď s nimi skončíte, aby ste uvoľnili základné zdroje. Ak tak neurobíte, môže to viesť k únikom pamäte.
• Asynchrónne operácie: Pamätajte, že copyTo je asynchrónna operácia. Použite await, aby ste sa uistili, že operácia kopírovania sa dokončí predtým, ako pristúpite k pixelovým dátam.
• Bezpečnostné obmedzenia: Buďte si vedomí bezpečnostných obmedzení, ktoré sa môžu vzťahovať na prístup k pixelovým dátam z videí z iného pôvodu (cross-origin).

Príklad: Konverzia YUV na RGB

Zvážme zložitejší príklad: konverziu VideoFrame vo formáte YUV420 na VideoFrame vo formáte RGB. To zahŕňa čítanie rovín Y, U a V, ich konverziu na hodnoty RGB a následné vytvorenie nového RGB VideoFrame.

Túto konverziu je možné implementovať pomocou nasledujúceho vzorca:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Tu je kód:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

Tento príklad demonštruje silu a zložitosť práce s rovinami VideoFrame. Vyžaduje si dobré pochopenie formátov pixelov, rozloženia pamäte a konverzií farebných priestorov.

Záver

API rovín VideoFrame v WebCodecs odomyká novú úroveň kontroly nad spracovaním videa v prehliadači. Porozumením, ako pristupovať a priamo manipulovať s pixelovými dátami, môžete vytvárať pokročilé aplikácie pre video efekty v reálnom čase, počítačové videnie, strih videa a ďalšie. Hoci práca s rovinami VideoFrame môže byť náročná, potenciálne odmeny sú značné. Ako sa WebCodecs bude ďalej vyvíjať, nepochybne sa stane nevyhnutným nástrojom pre webových vývojárov pracujúcich s médiami.

Odporúčame vám experimentovať s API rovín VideoFrame a preskúmať jeho schopnosti. Porozumením základných princípov a uplatňovaním osvedčených postupov môžete vytvárať inovatívne a výkonné video aplikácie, ktoré posúvajú hranice toho, čo je v prehliadači možné.

Ďalšie zdroje

• MDN Web Docs o WebCodecs
• Špecifikácia WebCodecs
• Úložiská vzorového kódu WebCodecs na GitHube.